<template>
  <el-dialog v-model="visible" :title="title" width="1130" show-footer show-zoom resize @close="close">
    <template #default>

      <vxe-table :data="form.detail" :round="true" show-overflow :column-config="{ resizable: true }"
        :row-config="{ height: 100 }" height="500" @checkbox-change="checkboxChange
          ">
        <vxe-column type="checkbox" fixed="left" width="60" v-if="handleType == 'in'"></vxe-column>
        <vxe-column field="head_box_order_no" title="箱号" width="220"></vxe-column>
        <vxe-column field="name" title="Shipment ID" width="120">
          <template #default="{ row }">
            {{ form.shipment_id }}
          </template>
        </vxe-column>
        <vxe-column field="to_fn_sku" title="FNSKU" width="100"></vxe-column>
        <vxe-column field="sku" title="SKU" width="120">
          <template #default="{ row }">
            {{ row.sku }}
          </template>
        </vxe-column>
        <vxe-column field="name" title="图片" width="100">
          <template #default="{ row }">
            <div>
              <div class="image-item" v-for="(item, index) in row.image" :key="index"><img :src="item"></div>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="sku_cn_title" title="名称" width="120">
          <template #default="{ row }">
            {{ row.sku_cn_title }}
          </template>
        </vxe-column>
        <vxe-column field="install_box_num" title="数量" width="100"></vxe-column>
        <vxe-column title="入库数量" v-if="handleType == 'in'" width="120">
          <template #default="{ row }">
            <el-input v-model="row.num" placeholder="入库数量" />
          </template>
        </vxe-column>
        <vxe-column field="in_warehouse_num" title="已入库数量" width="100"></vxe-column>
        <vxe-column field="diff_num" title="差异数量" width="100"></vxe-column>
        <vxe-column field="opearn" title="操作" width="100" fixed="right" v-if="handleType == 'in'">
          <template #default="{ row, index }">
            <el-link size="small" type="primary" @click="onStorage(row)">入库</el-link>
          </template>
        </vxe-column>
      </vxe-table>
    </template>

    <template #footer>
      <template v-if="handleType == 'view'">
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
      </template>
      <div class="flex justify-center py-2" v-else>
        <el-button type="primary" @click="onStorage()">批量入库</el-button>
        <el-button type="primary" @click="onhandleEnd()">手动完结</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal" lang="jsx">
import { getHeadOrderDetail, receivingHeadOrder, endHeadOrder } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const visible = ref(false)
const emits = defineEmits(['query'])

const props = defineProps({
  wareDataList: {
    type: Array,
    default: [],
  },
})

const data = reactive({
  form: {},
  title: '',
  handleType: null,
  records: []
})
const { form, title, handleType, records } = toRefs(data)

const statusMap = new Map([
  ['in', '入库'],
  ['view', '详情'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}


const getDetail = async (id) => {
  try {
    const res = await getHeadOrderDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const checkboxChange = async (row) => {
  records.value = row.records
}

// 手动入库
const onStorage = async (row) => {
  if (!row) {
    if (records.value == 0) {
      ElMessage.error('至少选择一条')
      return
    }
  }
  let item = row ? [row] : records.value
  const massageArray = []
  let detail = item.map((i, index) => {
    if (!i.num) {
      massageArray.push(`第 ${index + 1} 条入库数量需要大于0`)
    }
    return {
      id: i.id,
      num: i.num
    }
  })
  if (massageArray && massageArray.length) {
    return ElMessageBox({
      title: '提示',
      message: <div>
        {massageArray.map(d => h('p', null, d))}
      </div>,
    })
  }

  try {
    const res = await receivingHeadOrder({
      id: form.value.id,
      detail
    })
    ElMessage.success('操作成功')
    
  } catch (e) {
    throw Error(e)
  }

}

const onhandleEnd = async (row) => {
  try {
    const res = await endHeadOrder({
      id: form.value.id
    })
    ElMessage.success('操作成功')
  } catch (e) {
    throw Error(e)
  }
}


const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}

.image-item {
  width: 60px;
  height: 60px;
}
</style>
